<template>
  <div class="app-container">
    <el-form label-width="120px">
      <el-row :gutter="24">
        <el-divider content-position="left">
          <legend class="divider-line">换货基本信息</legend>
        </el-divider>
        <el-col :span="24">
          <el-form-item label="商品名称：">
            <div class="yxkj-word-black">{{ memberProductExchange.productName }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="换货状态：">
            <div class="yxkj-word-black">
              {{ codeBox.MEM_PROD_EXCHG_STATE[memberProductExchange.state] }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="所属商家：">
            <div class="yxkj-word-black">{{ memberProductExchange.sellerName }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="商品主图：">
            <div class="yxkj-word-black">
              <el-image style="width: 150px; height: 150px" :src="$imagePath + memberProductExchange.product.masterImg"></el-image>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="订单号：">
            <div class="yxkj-word-black">{{ memberProductExchange.orderSn }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="用户名：">
            <div class="yxkj-word-black">{{ memberProductExchange.memberName }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="换货数量：">
            <div class="yxkj-word-black">{{ memberProductExchange.number }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="换货详情：">
            <div class="yxkj-word-black">{{ memberProductExchange.question }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="换货时间：">
            <div class="yxkj-word-black">{{ memberProductExchange.createTime }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item v-if="memberProductExchange.image != ''" label="换货图片：">
            <div class="yxkj-word-black">
              <el-image style="width: 150px; height: 150px" :src="$imagePath + memberProductExchange.image"></el-image>
            </div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-divider content-position="left">
          <legend class="divider-line">商家收货信息</legend>
        </el-divider>
        <el-col :span="24">
          <el-form-item label="省市区：">
            <div class="yxkj-word-black">{{ memberProductExchange.addressAll2 }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="详细地址：">
            <div class="yxkj-word-black">{{ memberProductExchange.addressInfo2 }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="手机：">
            <div class="yxkj-word-black">{{ memberProductExchange.contactPhone2 }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="收货人：">
            <div class="yxkj-word-black">{{ memberProductExchange.contactName2 }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="退货物流：">
            <div class="yxkj-word-black">{{ memberProductExchange.logisticsName2 }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="退货单号：">
            <div class="yxkj-word-black">{{ memberProductExchange.logisticsNumber2 }}</div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-divider content-position="left">
          <legend class="divider-line">用户收货信息</legend>
        </el-divider>
        <el-col :span="24">
          <el-form-item label="省市区：">
            <div class="yxkj-word-black">{{ memberProductExchange.addressAll }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="详细地址：">
            <div class="yxkj-word-black">{{ memberProductExchange.addressInfo }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="手机：">
            <div class="yxkj-word-black">{{ memberProductExchange.phone }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="收货人：">
            <div class="yxkj-word-black">{{ memberProductExchange.contactName }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="退货物流：">
            <div class="yxkj-word-black">{{ memberProductExchange.logisticsName }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="快递单号：">
            <div class="yxkj-word-black">{{ memberProductExchange.logisticsNumber }}</div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24" style="margin-bottom: 60px;">
        <el-col :span="24">
          <el-divider content-position="left">
            <legend class="divider-line">换货操作日志</legend>
          </el-divider>
          <el-table :data="memberProductExchangeLogs" border style="width: 100%">
            <el-table-column prop="operatingName" label="操作人" width="150"></el-table-column>
            <el-table-column prop="createTime" label="操作时间" width="200"></el-table-column>
            <el-table-column prop="content" label="操作内容"></el-table-column>
          </el-table>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <div class="fixed-bottom-20">
            <el-button type="success" @click="back">返回</el-button>
        </div>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { detailsProductExchange } from "@/api/orderafter";
import { getCodeManager } from "@/api/all";
export default {
  name: "exchangedetails",
  data() {
    return {
      memberProductExchange: {},
      memberProductExchangeLogs: []
    };
  },
  created() {
    let id = this.$route.query.id;
    detailsProductExchange({ id: id }).then(res => {
      this.memberProductExchange = res.data.data.memberProductExchange
      this.memberProductExchangeLogs = res.data.data.memberProductExchangeLogs
    });
    // 是否推荐
    getCodeManager("MEM_PROD_EXCHG_STATE", () => {});
  },
  methods: {
    back() {
      history.back();
    },
  }
};
</script>
<style scoped>
.divider-line {
  font-size: 20px;
  font-weight: 300;
}
.el-form-item {
  margin-bottom: 5px;
}
.picture-list {
  display: flex;
}
.picture-list li {
  list-style: none;
  margin-right: 10px;
}
</style>
